<!-- <template>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template> -->

<template>
  <div style="margin:20px;">

 
    <div class="title-container">
      <h3 class="title">用户信息</h3>
    </div>
       
     <div class="all">
      <el-table :data="userData" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}" stripe style="width: 120%" height="600">
        <el-table-column prop="id" label="用户ID" width="150px"></el-table-column>
        <el-table-column prop="username" label="用户名" width="200px"></el-table-column>
        <el-table-column prop="phone" label="手机号码" width="300px"></el-table-column>
        <el-table-column prop="email" label="电子邮箱" width="400px"></el-table-column>
        <el-table-column prop="status" label="人员状态" width="150px" >
         <template slot-scope="scope">   <el-tag
                     :type="scope.row.status === true ? '' : 'danger'"
                     close-transition>{{scope.row.status?'正常':'注销'}}</el-tag>
         </template>
        </el-table-column>
  
      </el-table>
       <el-pagination
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :current-page=" currentPage"
           :page-sizes="[12,30]"
           :page-size="pageSize"
           layout="total,sizes, prev, pager, next,jumper"
           :total=" total"
           class ="page">
       </el-pagination>
     </div>

  </div>
 </template>
 
 <script>
 export default {
   data(){
     return {
       userData:[],
       total:'',
       pageSize:10,
       currentPage:1,
       form:{
         username:'',
         phone:''
       }
     }
   },
   methods:{
 
     handleSizeChange(val){
       this.pageSize=val;
       this.info()
 
     },
     handleCurrentChange(val){
      this.currentPage=val;
      this.info()
     },
     info(){
       this.$http.post('http://localhost:9999/user',{
         currentPage:this.currentPage,
         pageSize:this.pageSize
 
       }).then(res=>{
        this.userData=res.data.data.list
        this.total=res.data.data.total
        console.log(this.total)
       })
     }
     
     },
     created(){
       this.info()
     }
 }
 
 </script>
 
 <style>

 .title-container {
   position: relative;
 }
 .title {
   font-size: 30px;
   color: #bc0e0edd;
   margin: 0px auto 20px auto;
   text-align: center;
   font-weight: bold;
 }
 </style>
 






